<template>
<div style="width: 100%;overflow-x: auto;overflow-y: hidden">
  <div style="min-width: 610px" class="dispatch-div" v-for="(item, index) in orderDataArr" :key="index" v-show="(!isMore && index < 4) || isMore">
    <el-form ref="searchForm">
      <el-row :gutter="10">
        <el-col :span="1">
          <el-checkbox :disabled="item.isDepart" v-model="item.checkOrder" @change="checkAllServiceChange(item)"></el-checkbox>
        </el-col>
        <el-col :span="23">
          <el-row :gutter="10">
            <el-col :span="8">
              <!--TODO:  订单是否已经出发（isDepart）-->
              <a href="javascript:;" class="blue-color" v-if="!item.isDepart" @click="orderDetail(item)">{{item.orderNo}}</a>
              <el-tooltip content="已出发" placement="top" effect="light" v-if="item.isDepart">
                <a href="javascript:;" class="blue-color" @click="orderDetail(item)" style="color: #E30000">{{item.orderNo}}<i class="el-icon-info"></i></a>
              </el-tooltip>
            </el-col>
            <el-col :span="4">总包件：{{item.totalPackage}}</el-col>
            <el-col :span="4">总体积：{{item.totalVolume}} m³</el-col>
            <el-col :span="4">总重量：{{item.totalWeight}} kg</el-col>
            <el-col :span="4" v-if="!dispatchStage">
              <el-button class="pull-right" size="mini" type="primary" @click="appointment(item)">预约</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="服务类型：" class="dispatch-item-service">
                <span>{{item.serviceType}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="item.startTime">
              <el-form-item label="干线预约：" class="dispatch-item-service">
                <span>{{item.startTime | unixTimestampFilter('YYYY-MM-DD')}}({{item.timeIntervalCode | filterDataBaseDictionary}})</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="客户信息：" class="dispatch-item-service">
                <span>{{item.consigneName}} {{item.consignePhone}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="dispatchStage">
              <el-form-item label="订单状态：" class="dispatch-item-service">
                <span>{{item.serviceState | filterDataBaseDictionary}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提货地址：" class="dispatch-item-service">
                <span>{{item.consigneProvince}} {{item.consigneCity}} {{item.consigneDistrict}} {{item.consigneAddress}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <!--待调度列表才加载组件-->
  <appoint-modal  @refresh="refresh" v-if="!dispatchStage" :rows="passData" :visible.sync="visible" :isEdit="isEdit"></appoint-modal>
</div>
</template>

<script>
import {filterDataBaseDictionary, decimalNumFilter, unixTimestampFilter} from '@/filters'
import AppointModal from '@/views/oms/dispatch/distributionOrder/AppointModal'
export default {
  name: 'OrderComponent',
  components: {
    AppointModal
  },
  props: {
    orderDataArr: {
      type: Array,
      required: true
    },
    isMore: {
      type: Boolean,
      default: true
    },
    dispatchStage: { // false为待调度，true为已调度
      type: Boolean,
      default: false
    }
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      isEdit: true,
      passData: [],
      visible: false
    }
  },
  computed: {},
  methods: {
    checkAllServiceChange() {
      // 勾选的多单数据
      let arr = []
      let checkedVolume = 0
      this.orderDataArr.forEach(item => {
        if (item.checkOrder) {
          checkedVolume += item.totalVolume
          arr.push(item)
        }
      })
      let checkedOrderCount = arr.length
      let checkAll = checkedOrderCount === this.orderDataArr.length
      let checkAllIndeterminate = checkedOrderCount > 0 && checkedOrderCount < this.orderDataArr.length
      let data = {}
      data.checkedOrderCount = checkedOrderCount
      data.checkAll = checkAll
      data.checkAllIndeterminate = checkAllIndeterminate
      data.checkedVolume = decimalNumFilter(checkedVolume)
      this.$emit('input', data)
    },
    getCheckData() {
      let _checkedArr = []
      this.orderDataArr.forEach(item => {
        if (item.checkOrder) {
          _checkedArr.push(item.serviceOrderId)
        }
      })
      return _checkedArr
    },
    appointment(data) {
      this.visible = true
      this.passData = [{id: data.appointId, appointTime: data.startTime, timeCode: data.timeIntervalCode, service: data.serviceType}]
    },
    refresh() {
      this.$emit('refresh')
    },
    orderDetail(data) {
      this.$router.push({path: '/ss-oms/dispatch/two-grade-transfer-dispatch/order-detail/' + data.orderId})
    }
  }
}
</script>
<style lang="scss">
  .dispatch-item-service {
    margin-bottom: 0px;
    .el-form-item__label{
      color: #303133;
      line-height: 22px;
      font-weight: 500;
    }
    .el-form-item__content {
      line-height: 22px;
    }
  }
</style>
